<template>
    <form class="form" @submit.prevent="login">
        <h1 class="form__title">欢迎回来！</h1>

        <div class="form__group">
            <label>Email</label>
            <input type="text" class="form__control" v-model="form.email"/>
            <small class="error__control" v-if="error.email">{{error.email}}</small>
        </div>

        <div class="form__group">
            <label>Password</label>
            <input type="password" class="form__control" v-model="form.password"/>
            <small class="error__control" v-if="error.password">{{error.password[0]}}</small>
        </div>

        <div class="form__group">
            <button :disabled="isProcessing" class="btn btn__primary">Login</button>
        </div>

    </form>
</template>

<script type="text/javascript">
    import Flash from '../../helpers/flash';
    import Auth from '../../store/auth';
    import { post } from '../../helpers/api';

    export default{
        data(){
            return {
                form: {
                    email: '',
                    password: ''
                },
                error: {},
                isProcessing: false
            }
        },
        methods: {
            login(){
                this.isProcessing = true;
                this.error = {};
                post(`/api/login`, this.form).then((res) => {
                    if(res.data.authenticated){
                        Auth.set(res.data.api_token, res.data.user_id);
                        Flash.setSuccess('登录成功！');
                        this.$router.push('/');
                    }
                    this.isProcessing = false;
                }).catch((err) => {
                    if(err.response.status === 422){
                        this.error = err.response.data;
                    }
                    this.isProcessing = false;
                })
            }
        }
    }
</script>